<template>
  <div class="ScaleBox" style="--scaleX:1; --scaleY:1;" v-loading="loading">
    <div class="reportBox">
      <div class="btn-box zhbtnbox">
        <!-- <div class="btn-item" @click="PrintPdf()">打印</div> -->
        <!-- <div class="btn-item" :class="btnload?'nockickn':''" @click="downLoadPdf()">{{ btnload ? '导出中 ...' : '导出' }}</div> -->
        <el-button  class="btntxt" size="medium" @click="PrintPdf()">打印</el-button>
        <el-button class="btntxt"  size="medium"  :loading="btnload" @click="downLoadPdf">{{ btnload ? '导出中 ...' : '导出' }}</el-button>
      </div>
      <div id="pdfDomBox" ref="pdfDom">
        <div class="reportHeader">
          {{planNames}}
          灾害预演预案 
        </div>
        <div id="pdfDom" class=" printContent">
        <el-row >
            <!-- 左边部分-------strat----->
            <el-col :span="12" class="dvlef">
            <div class="boxItem">
                <div class="boxItemTitle">组织责任体系图</div>
                <div class="boxItemcont">
                <el-row>
                <el-col :span="16">
                 <p>   
                  <span >村组名称：{{planNames}}
                  </span>
                 </p>
                  <p>  
                  <el-col :span="8"> 
                  <span >威胁对象：</span>{{structData.threatObjNum | nonJudgment}} 户
                  </el-col>
                  <el-col :span="8">
                  <span >威胁人口：</span>{{structData.threatPNum | nonJudgment}} 人
                  
                  </el-col>
                  <el-col :span="8">
                  <span >特殊人群：</span> --
                  </el-col>
                 </p>
                 <p>   
                  <span >安置点：{{structData.resSite | nonJudgment}}
                  </span>
                 </p>
                   <p>   
                  <span >县汛期值班电话：{{structData.countyPhone | nonJudgment}}
                  </span>
                 </p>
                  <p>   
                  <span >政府值班电话：{{structData.goverPhone | nonJudgment}}
                  </span>
                 </p>
                   <p>   
                  <span >应急值班电话：{{structData.urgentPhone | nonJudgment}}
                  </span>
                 </p>
                 <el-col :span="24">
                    <div class="boxItemLitleTitle martop10">预警指标: </div>
                    <p>   
                    <span v-show="!structData.lvl2Descb">准备转移：</span>
                    {{structData.lvl2Descb | nonJudgment}}
                   </p>
                   <p>   
                     <span v-show="!structData.lvl1Descb" >立即转移：</span>
                     {{structData.lvl1Descb | nonJudgment}}
                   </p>
                 </el-col>
                </el-col>
                <el-col :span="8" v-loading="leftuseload">
                <div style="margin-top:-47px;" v-show="leftUsrList.length">
                  <div v-for="(item,ind) in leftUsrList" :key="ind">
                   <div class="column-item">
                   <p  class="colTitle"> {{item.typeStr}} </p>
                   <p >{{item.inJob}}：{{item.job?item.job:'--'}}</p>
                   <p >{{item.userName}}：{{item.phone?item.phone:'--'}} </p>
                   <p>{{item.context}}</p>
                 </div>
                 <div class="icon-box" v-show="ind!=(leftUsrList.length-1)">
                     <img :src="imgobj.reoprtjian" />
                 </div>

                  </div>
                  <!-- 指挥层级图----end------->
                  <!-- <div class="column-item">
                   <p  class="colTitle"> 妥安乡防汛抗旱指挥部 </p>
                   <p >指挥长：党委书记</p>
                   <p > 刘少勋：19983995318 </p>
                 </div>
                 <div class="icon-box">
                     <img :src="imgobj.reoprtjian" />
                 </div> -->
                </div>
                </el-col>
                </el-row>
                </div>
                <div class="martop10">
                    <div class="titeBox">山洪灾害危险区责任人</div>
                    <div class="resNoData">暂无数据</div>
                </div>
                <div class='boxItemLitleTitle martop10'>琅井村文昌宫危险区最大淹没深度0.13米，预估受灾情况及转移安置线路如下所示： </div>
                <div class="" style="height: 564px;">
                    <miniMap></miniMap>
                </div>
            </div>
            </el-col>
             <!-- 右边部分-------strat----->
            <el-col :span="12" class="dvriht">
            <div class="boxItem">
            <div class="boxItemTitle">预警转移流程图</div>
            <div class="rihtimg">
                <img :src="imgobj.tutu" />
            </div>
            </div>
            </el-col>
        </el-row>
         
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import printJS from 'print-js';
import miniMap from '../../../map/leaflet/MiniMap.vue'

import { GetPlanBasicList, GetPlanOrganizationList } from '@/api/xuna.js';
import {getPlanBasicByRisk} from '@/api/planreport.js';
import reportjian from '@/assets/newimg/reportjian.png'
import tutu from '@/assets/newimg/tutu.png'
export default {
  components: {
        miniMap
    },
    // 接受父组件传递的值
    data() {
        return {
             imgobj:{
             'reoprtjian':reportjian,
             'tutu':tutu,
           },
            structData: {},
            planNames:'',
            loading: false,
            btnload:false,
            isPrint:false,
            planIds:'',
            leftUsrList:[],
            leftuseload:false,
            
        }
    },
     filters:{
        //处理函数
        nonJudgment(dataStr){
          if (dataStr) {
            return dataStr;
          }else{
            return '--';
          }
        }
    },
    mounted() {
        
    },
    created() {
      //  console.log(this.$route.query)
        if (this.$route.query.id) {
           this.planIds = this.$route.query.id;
           this.getGetPlanBasicList();
           this.getPlanBasicByRisklist();
        }
        this.planNames = this.$route.query.planName?this.$route.query.planName:'--';

    },
    methods: {
       getGetPlanBasicList() {
            this.loading = true
            GetPlanBasicList({ planId: this.planIds }).then((res) => {
               // console.log(res)
                this.structData = res.data;
                this.loading = false;
            }).catch(err=>{
              this.loading = false;
            })
        },
        getPlanBasicByRisklist(){
          let that = this;
          this.leftuseload= true;
          let pams = {
                  code: this.planIds
              }
           getPlanBasicByRisk(pams).then((res) => {
              //  console.log(res)
                let dat = res.data;
                if(res.isSuccess){
                   this.leftUsrList = dat.userList?dat.userList:[];
                }else{
                  this.leftUsrList = [];
                }
               this.leftuseload= false;
            }).catch(err=>{
               this.leftuseload= false;
              
            });

        },
        PrintPdf(){
            this.isPrint = true
            html2canvas(this.$refs.pdfDom, {
                allowTaint: true,
                taintTest: false,
                useCORS: true,
                dpi: window.devicePixelRatio * 4,
                scale: 4
            }).then((canvas) => {
                const url = canvas.toDataURL()
                printJS({
                    printable: url, // 要打印的id
                    type: 'image',
                    style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
                })
                this.isPrint = false
            })
        },
        downLoadPdf() {
            let that = this;
            if(this.btnload){
             return;
            }
            this.btnload = true;
              // return;
               this.$nextTick(() => {
                that.$refs.pdfDom.scrollTop = 0; // 避免截图不全
                let dom = document.getElementById('pdfDomBox')
                new html2canvas(dom, {
                backgroundColor: '#fff', // 背景颜色
                dpi: 1000, // 将分辨率提高到特定的dpi,默认值为96
                scale: 1, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
                useCORS: true, // 是否尝试使用CORS从服务器加载图像
                allowTaint: true,
                }).then((canvas) => {
                    // this.posterUrl = canvas.toDataURL('image/png')
                    var pdfWidth = canvas.width
                    var pdfHeight = canvas.height
                    var pageHeight = pdfWidth / 592.28 * 841.89
                    var leftHeight = pdfHeight
                    var position = 0
                    var imgWidth = 595.28
                    var imgHeight = 595.28 / pdfWidth * pdfHeight
                    var pageData = canvas.toDataURL('img/jpeg', 1.0)
                    var pdf = new JsPDF('', 'pt', 'a4')
                    // 判断打印dom高度是否需要分页，如果需要进行分页处理
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight
                            position -= 841.89
                            if (leftHeight > 0) {
                                pdf.addPage()
                            }
                        }
                    }
                    pdf.save('预演预案.pdf');
                    that.btnload = false;
                    that.$message({
                        message: '导出PDF成功',
                        type: 'success',
                        duration: 2000
                    });
                })
                });
            
        }
    }
}
</script>

<style lang="scss" scoped>
	.ScaleBox {
		width: 100%;
		min-width: 1200px;
		height: 100%;
		overflow: hidden;
		position: absolute;
		transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));
		display: flex;
		flex-direction: column;
		transform-origin: 0 0;
		left: 0;
		top: 0;
		transition: .3s;
		z-index: 999;
	}
	.reportBox {
		width: 100%;
		height: 100%;
		background-color: #fff;
		color: #000;
        overflow-y: auto;
      #pdfDomBox {
        padding: 0px 70px;
      }
    }
    .btn-box {
            padding: 25px 70px 0;
    }
	.reportHeader {
			font-size: 40px;
			line-height: 50px;
			font-weight: bolder;
			text-align: center;
      margin-bottom: 47px;
      // margin-top:15px;
       
	}
  .printContent{
        .dvlef{
            padding-right:1%;
        }
        .dvriht{
            padding-left:1%;
        }
      	.boxItem {
				border-radius: 12px;
				border: 1px solid #dadde0;
				margin-bottom: 20px;
				padding: 25px 28px;
				position: relative;

				.boxItemTitle {
					width: 230px;
					height: 32px;
					line-height: 34px;
					padding-left: 42px;
					font-size: 22px;
					color: #fff;
					font-weight: bolder;
					background-image: url('~@/assets/newimg/reportTitleBg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
                }
        }
       .boxItemcont{
        font-size: 24px;
        line-height: 32px;
        margin-top: 15px;
        font-size: 15px;
        padding-bottom: 10px;
       }
       .colorBlue {
            color: #228fff;
            font-weight: bolder;
        }
      
        .boxItemLitleTitle {
            height: 32px;
            line-height: 30px;
            font-size: 15px;
            font-weight: bold;
            color: #228fff;
            
        }
  }
  .martop10{
    margin-top:10px;
  }
  .padbom0{
        padding-bottom:0px;
      }
  .column-item{
    width: 100%;
    // height: 120px;
    background: hsla(210,5%,92%,0);
    border: 1px solid #dadde0;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 1.6;
  }
  .icon-box{
    display: flex;
     width: 100%;
    height: 21px;
    justify-content: space-around;
  }
  .colTitle{
    color: #228fff;
  }
.margBot20{
  margin-bottom: 20px;
}
.nockickn{
  pointer-events: none;
}
.bordsild{
  border-radius: 12px;
  border: 1px solid #dadde0;
  padding: 10px;
  position: relative;
}
 .zhbtnbox{
   .btntxt{
     background-color: #fff;
     color: #606266;
   }
   .btntxt:hover{
      background-color: #ecf5ff;
      color: #409EFF;
   }
  .btntxt:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none;
  }
}
.rihtimg{
    margin-top: 41px;
    margin-left: 15px

}
.titeBox{
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #eaebec;
    border: 1px solid #dadde0;
    border-radius: 4px;
    text-align: center;
    color: #228fff;
}
.resNoData{
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 14px;
}
</style>


